<template>
  <ul class="hot_right">
    <li v-for="(item, index) in products" :key="index">
      <div class="item">
        <router-link :to="`/product/${item.id}`">
          <img v-lazy="item.s_goods_photos[0].path" alt="" />
        </router-link>
        <router-link :to="`/product/${item.id}`">
          {{ item.name }}
        </router-link>
        <span class="pirce">
          <div>￥</div>
          {{ item.sale_price || item.price }}
        </span>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["products"],
};
</script>

<style lang="scss">
.hot_right {
  margin-bottom: 0;

  li {
    display: inline-block;
    width: 232px;
    height: 300px;
    margin-left: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    transition: all 0.2s linear;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      &:last-of-type {
        margin-right: 0;
      }

      a {
        display: block;
        font-size: 16px;
        text-decoration: none;
        color: #263746;
        img {
          width: 232px;
          height: 200px;
          transform: scale(0.7);
        }
      }

      span {
        font-size: 14px;
        color: #828282;
      }

      .pirce {
        margin-top: 5px;
        font-size: 16px;
        color: #ee0a3b;

        div {
          display: inline-block;
          font-size: 12px;
        }
      }
    }
  }
}
</style>